<!DOCTYPE html>
<html th:replace="~{layout :: layout(~{::title}, ~{::section})}">
<head>
<title>社团管理页面</title>

</head>
<body>
<section>
	<link th:href="@{/zui/lib/DataTables-1.10.21/media/css/jquery.dataTables.min.css}" rel="stylesheet">
	<table class="table datatable" id="catList">
		<thead>
		<tr>
			<!-- 以下两列左侧固定 -->
			<th>#</th>
			<th>分类名称</th>
			<!-- 以下列右侧固定 -->
			<th style="width: 100px;align: right">操作</th>
		</tr>
		<tr>
			<td colspan="8" align="right">
				<a th:href="toedit">添加</a>
			</td>
		</tr>
		</thead>
		<tbody>
		<tr th:each="cat : ${articleCatList}">
			<td th:text="${cat.id}"></td>
			<td th:text="${cat.catName}"></td>

			<td  >
				<a th:href="@{toedit(id=${cat.id})}">更新</a>
				<a th:href="@{delete(id=${cat.id})}">删除</a>
			</td>
		</tr>

		</tbody>
	</table>

	<script th:src="@{/zui/lib/DataTables-1.10.21/media/js/jquery.dataTables.min.js}"></script>
	<script type="text/javascript">
		/* 初始化数据表格 */
		$(document).ready(function(){
			$("#catList").DataTable({
				"language": {
					"lengthMenu": "_MENU_ 条记录每页",
					"zeroRecords": "没有找到记录",
					"info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
					"infoEmpty": "无记录",
					"infoFiltered": "(从 _MAX_ 条记录过滤)",
					"paginate": {
						"previous": "上一页",
						"next": "下一页"
					}
				},
				paging: true,

			});
		});
	</script>
</section>
</body>
</html>